<template>
    <div class="sender-box">
       <h4>精选专练</h4>
       <div class="rong" v-for="(item,index) in jingxuan" :key="index">
           <div class="heder" >
               <span>{{item.jibu}}</span>
               <p>{{item.neirong}}</p>
           </div>
            <div class="cent">
                <button>真题</button>
                <button>专项突破</button>
                <button>听力</button>
            </div>
            <div class="foot">
                <span></span>
                <p>有道六级教研组</p>
            </div>
       </div>

       <div class="rong">
           <div class="heder">
               <span>六级</span>
               <p>六级靠前听力刷题（3年真题</p>
           </div>
            <div class="cent">
                <button>真题</button>
                <button>听力</button>
                <button>专项突破</button>
            </div>
            <div class="foot">
                <span></span>
                <p>建昆</p>
            </div>
       </div>
       <div class="rong">
           <div class="heder">
               <span>四级</span>
               <p>四级听力考前刷题（3年真题）</p>
           </div>
            <div class="cent">
                <button>专项突破</button>
                <button>特别精选专练</button>
                <button>每日一练</button>
            </div>
            <div class="foot">
                <span></span>
                <p>郝鹏飞</p>
            </div>
       </div>

        <div class="rong">
           <div class="heder">
               <span>教资</span>
               <p>中小幼教资综合素质精选专练</p>
           </div>
            <div class="cent">
                <button>常考题</button>
                <button>经典题</button>
                <button>每日一练</button>
            </div>
            <div class="foot">
                <span></span>
                <p>小黑老师</p>
            </div>
       </div>

       <div class="rong">
           <div class="heder">
               <span>二级</span>
               <p>计算机二级真题专练</p>
           </div>
            <div class="cent">
                <button>专项突破</button>
                <button>练一道，会一类</button>
                <button>每日一练</button>
            </div>
            <div class="foot">
                <span></span>
                <p>郝鹏飞</p>
            </div>
       </div>

    </div>
</template>

<script>

import axios from "axios";

export default {
    name:"Sender",
    data(){
        
        return{
           jingxuan:[]
        }
    },
    created(){

      axios({
          url:"http://localhost:3000/jingxuan",
          method:"get",
          params:{
              
          },
          
      })
      .then((res)=>{
          this.jingxuan = res.data;
        //   console.log(res.data)
      })
      
    }
}
</script>


<style>
.sender-box{
    width: 95%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    
}
.sender-box h4{
    height: .6rem;
    margin-left: .15rem;
    line-height: .6rem;
    font-size: .2rem;
    font-weight: 600;
    
}
.rong{
    width: 95%;
    
    margin-top: .2rem;
    height: 1.8rem;
    border-radius: .2rem;
    background-color: #f6f7fc;
    display: flex;
    flex-direction: column;
}
.rong  .heder{
     display: flex;
     justify-content: space-around;
     align-items: center;
     margin-top: .25rem;
}
.rong  .heder span{
    
    width: .4rem;
    height: .2rem;
    text-align: center;
    line-height: .2rem;
    background-color: #818b97;
    font-size: 12px;
    color:white;
}
.rong  .heder p{
    font-weight: 600;
    padding-right: .3rem;
}
.rong .cent{
    padding-top: .2rem;
    display: flex;

}
.rong .cent button{
    /* border: none; */
    border-color: orange;
    border-radius: .1rem;
    background-color: #fefbf6;
    color: orange;
    margin-left: .15rem;
}
.rong .foot{
    display: flex;
    align-items: center;
    padding-top: .3rem;
    padding-left: .15rem;
}
.rong .foot span{
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background-color: rgb(212, 240, 181);
}
.rong .foot p{
    margin-left: 20px;
    color: #a3a3a3;
    font-size: 14px;
}
</style>